import AvatarTitle from "@/components/AvatarTitle";
import { LatestAvatarViewLoading } from "@/components/Loading";
import useGetLatestAvatar from "@/app/[language]/query/useGetLatestAvatar";
import { useTranslations } from "next-intl";
import { Col, Row } from "reactstrap";
import { getDatetime } from "taehui-ts/date";

export default function LatestAvatarsView() {
  const t = useTranslations();

  const { data: latestAvatar, isFetched: isLatestAvatarLoaded } =
    useGetLatestAvatar();

  return (
    <Row className="g-0">
      {isLatestAvatarLoaded ? (
        latestAvatar.map((latestAvatar, i) => (
          <Col className="m-1" key={i}>
            <h5>{t(`latestAvatarsView${i}`)}</h5>
            {latestAvatar.map(({ avatarID, avatarName, date }) => (
              <Row className="g-0" key={avatarID}>
                <AvatarTitle avatarID={avatarID} avatarName={avatarName}>
                  <span>{getDatetime(date)}</span>
                </AvatarTitle>
              </Row>
            ))}
          </Col>
        ))
      ) : (
        <LatestAvatarViewLoading loadingCounts={[5, 2]} />
      )}
    </Row>
  );
}